<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	html,body{
		margin:0px;
		padding:0px;
		width:100%;
		height:100%;
	}
	#map{
		width:100%;
		height:100%;
	}
</style>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var pyrmont = new google.maps.LatLng(39.932907,116.400146);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    directionsDisplay.setMap(map);
    calcRoute();
  }
  
  function calcRoute() {
    var start = "北京";
    var end = "上海";
    var request = {
        origin:start, 
        destination:end,
        waypoints: [
                    {
                      location:"太原", 
                      stopover:true
                    },{
                      location:"西安",
                      stopover:true
                    }],
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var legs = response.routes[0].legs;
        var all = 0;
		for ( var i = 0; i < legs.length; i++) {
			var leg = legs[i];
			all+=leg.distance.value;
		}
		setTimeout(function(){
			 alert("总长："+all+"米");
		}, 2000);
       
        
      }
    });
  }
</script>
<title>Insert title here</title>
</head>
<body onload="initialize()">
	<div id="map"></div>
</body>
</html>